<template>
  <div>
    <h1>学生列表</h1>
    <el-dialog
      title="成员详情"
      :visible.sync="dialogVisible"
      width="90%"
      @close="handleClose">
      <el-table :data="tableData.tableArr" border style="width: 100%">
        <el-table-column prop="studentName" label="学生姓名" >
          <template slot-scope="scope">
            <span v-if="!scope.row.isEditing">{{ scope.row.studentName }}</span>
            <input v-if="scope.row.isEditing" @blur="hideInput(scope.$index, scope.row)" v-model="scope.row.studentName" />
          </template>
        </el-table-column>
        <el-table-column prop="studentId" label="学号" >
          <template slot-scope="scope">
            <span v-if="!scope.row.isEditing">{{ scope.row.studentId }}</span>
            <input v-if="scope.row.isEditing" @blur="hideInput(scope.$index, scope.row)" v-model="scope.row.studentId" />
          </template>
        </el-table-column>
        <el-table-column prop="period" label="节次">
          <template slot-scope="scope">
            <span v-if="!scope.row.isEditing">{{ scope.row.period }}</span>
            <input v-if="scope.row.isEditing" @blur="hideInput(scope.$index, scope.row)" v-model="scope.row.period" />
          </template>
        </el-table-column>
        <el-table-column prop="monday" label="星期一" >
          <template slot-scope="scope">
            <span v-if="!scope.row.isEditing">{{ scope.row.monday }}</span>
            <input v-if="scope.row.isEditing" @blur="hideInput(scope.$index, scope.row)" v-model="scope.row.monday" />
          </template>
        </el-table-column>
        <el-table-column prop="tuesday" label="星期二" >
          <template slot-scope="scope">
            <span v-if="!scope.row.isEditing">{{ scope.row.tuesday }}</span>
            <input v-if="scope.row.isEditing" @blur="hideInput(scope.$index, scope.row)" v-model="scope.row.tuesday" />
          </template>
        </el-table-column>
        <el-table-column prop="wednesday" label="星期三" >
          <template slot-scope="scope">
            <span v-if="!scope.row.isEditing">{{ scope.row.wednesday }}</span>
            <input v-if="scope.row.isEditing" @blur="hideInput(scope.$index, scope.row)" v-model="scope.row.wednesday" />
          </template>
        </el-table-column>
        <el-table-column prop="thursday" label="星期四" >
          <template slot-scope="scope">
            <span v-if="!scope.row.isEditing">{{ scope.row.thursday }}</span>
            <input v-if="scope.row.isEditing" @blur="hideInput(scope.$index, scope.row)" v-model="scope.row.thursday" />
          </template>
        </el-table-column>
        <el-table-column prop="friday" label="星期五">
          <template slot-scope="scope">
            <span v-if="!scope.row.isEditing">{{ scope.row.friday }}</span>
            <input v-if="scope.row.isEditing" @blur="hideInput(scope.$index, scope.row)" v-model="scope.row.friday" />
          </template>
        </el-table-column>
        <el-table-column prop="saturday" label="星期六" >
          <template slot-scope="scope">
            <span v-if="!scope.row.isEditing">{{ scope.row.saturday }}</span>
            <input v-if="scope.row.isEditing" @blur="hideInput(scope.$index, scope.row)" v-model="scope.row.saturday" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="editRow(scope.$index)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button @click="uploadData">上传</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </el-dialog>

    <el-dialog
      title="成员课表"
      :visible.sync="kebiaodialog"
      width="90%"
      @close="handleClose2">
      <table>
          <tr>
            <!-- <th>签到时间/星期</th> -->
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
          </tr>
          <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
            <!-- <th v-if="this.tableTime!=undefined">{{ tableTime[rowIndex].start_time + ' - ' + tableTime[rowIndex].end_time }}</th> -->
            <td v-for="(cell, colIndex) in row" :key="colIndex">
              <div v-if="cell === -1">
            --
              </div>
              <div :class="buttonClass1(cell)"
              v-else>
              <div :class="buttonClass2(cell)" v-if="cell===0">
                <button
                    class="custom-button"
                    
                  >
                    {{ buttonContent(cell) }} 
                  </button>
                 
              </div>
              <template v-else>
                    {{ buttonContent(cell) }}
                  </template>
              
              </div>
 
            </td>
          </tr>
        </table>
    </el-dialog>
    <el-table :data="students" border style="width: 100%">
      <el-table-column prop="id" label="学号"/>
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="mypassword" label="密码" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="getcourcebyid(scope.row)">查看详情</el-button>
          <el-button type="primary" @click="gettodaycource(scope.row)">查看今日课表</el-button>
          <el-button type="primary" @click="resetkey(scope.row)">重置密钥</el-button>
          <el-button type="danger" @click="deleteStudent(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
  background
  layout="prev, pager, next"
  :total="totalCount"
  @current-change="handleCurrentChange">
</el-pagination>
  </div>
</template>

<script>
  import axios from 'axios';
export default {
    name: 'Studentlist',
    data(){
        return {
            students: [ 
      ],
      dialogVisible: false,
      kebiaodialog:false,
      tableData: {
        studentName: '',
        tableArr: []
      },
      totalCount: 0,
      currpage:1,
      tableTime: [],
      studentId: ''
        }
    },
    //写一个方法在刚到页面的时候就加载学生列表
    created(){
        this.getStudents()
    },
    methods: { 
      
    buttonClass1(cell) {
        return 'ppbox'; // 签到时，按钮样式为 bubble
    },
    buttonClass2(cell){

        return 'bubble'; // 签到时，按钮样式为 bubble

    },
      gettodaycource(row){
        this.studentId = row.id
        // this.gettime();
        this.generateTableData();
      },
          // 生成签到表格
    generateTableData() {
      this.$axios.get('api/user/cource', {
        params: { studentId: this.studentId }
      }).then(response => {
        const cou = response.data.data;
        this.tableData = Array.from({ length: 5 }, () => Array(5).fill(-1));
        for (let i = 0; i < 5; i++) {
          const periodCourses = cou.filter(item => item.period === i + 1);
          for (let j = 0; j < 5; j++) {
            const course = periodCourses.find(item => item.dayOfWeek === j + 1);
            if (course) {
              this.tableData[i][j] = course.isOver;
            }
          }
        }
        this.kebiaodialog=true;
      }).catch(error => {
        alert('账号错误请联系管理员');
        this.$router.push({ path: '/login' });
      });
    },
    
    // 获取签到时间
    gettime() {
      this.$axios.get('api/admin/gettime').then(response => {
        this.tableTime = response.data.data.time;
      }).catch(error => {
        console.error(error);
      });
    },
          // 根据签到状态返回不同的按钮内容
    buttonContent(cell) {
      if (cell === 1||cell===2) {
        return '✔'; // 未签到时，按钮内容为 "✔"
      } else if (cell === 3) {
        return '✘'; // 其他状态时，按钮内容为 "✘"
      }else if(cell===0){
        return '签到'; // 签到时，按钮内容为 "签到"
      }
      return ''; // 签到时不显示内容
    },
      deleteStudent(row){
        const isreset=confirm('确定要删除该学生的所有信息吗？')
        if(isreset){
          axios.post('api/admin/deleteStudent',{
          id:row.id
        })
        .then(response => {
         //刷新页面
         alert('删除成功')
         this.handleCurrentChange(1);
        })
        .catch(error => {
        })
        }
      },
      resetkey(row){
        console.log(row)
        //询问是否重置密钥
        const isreset=confirm('确定要重置密钥吗？')
        if(!isreset){
          return;
        }
        axios.post('api/cource/resetkey',{
          id:row.id
        })
        .then(response => {

        })
        .catch(error => {

        })
      } ,  
    
      getcourcebyid(row) {
        axios.get('api/cource/getcourcebyid',{
          params:{
            id:row.id
          }
        })
        .then(response => {
          const vo=response.data.data;   
            //  alert(response.data.data.errcourceVo+'这几周扫描失败，请手动填写')
             //筛选出vo中period为1的数据
             let num=1;

             //清除原有的数据
             this.tableData.tableArr=[];
             while(num<6){
             const periodnum=vo.filter(item=>item.period==num);
             console.log(num)
            //将第n节的数据赋值
            
                const objectOne={
                    studentName: row.name ,
                    studentId: periodnum[0].studentId,
                    period: this.period(num),
                        monday: this.weekofday(1,periodnum),
                        tuesday: this.weekofday(2,periodnum),
                        wednesday: this.weekofday(3,periodnum),
                        thursday: this.weekofday(4,periodnum),
                        friday: this.weekofday(5,periodnum),
                        saturday: this.weekofday(6,periodnum),
                        isEditing: false
                }
                this.tableData.tableArr.push(objectOne);
                // console.log(objectOne);
             num++;
             }
             console.log(this.tableData.tableArr);
             this.dialogVisible = true;
           })
        .catch(error => {
             console.error(error);
           });
      },
      weekofday(n,period){
        //查询period中dayOfWeek为n的课程
        let week=period.filter(item=>item.dayOfWeek==n);
        if(week.length==0){
            return '全(0-0)周'+n;
        }else if(week.length==1){
            let all='';
        switch(week[0].weekType){
            case 0:
                all='全'
                break;
            case 1:
                all='单'
                break;
            case 2:
                all='双'
                break;
        }
        all=all+'('+week[0].start_week+'-'+week[0].end_week+')'+'周'+n;
            return all;
        }else{
            return '出现错误';
        }
      },
      period(n){
    switch(n){
            case 1:
                return '1-2节';

            case 2:
                return '3-4节';

            case 3:
                return '5-6节';

            case 4:
                return '7-8节';
            case 5:
                return '9-10节';
        }
      },
      //********** */
      handleClose() {
      this.dialogVisible = false;
    },
    handleClose2(){
      this.kebiaodialog=false;
    },
    //提交到数据库
      uploadData(){
            axios.post('api/cource/addData', this.tableData.tableArr)
        .then(response => {
             if(response.data.data.code==1){
              this.dialogVisible = false;
             }
           }).catch(error => {
             console.error(error);
           });
        },    
      editRow(index) {
      this.tableData.tableArr[index].isEditing = true;
    },
      hideInput(index) {
      this.tableData.tableArr[index].isEditing = false;
    },
    //成员列表页码
      handleCurrentChange(val){
        this.currpage = val;
        this.getStudents();
      },
        getStudents(){
            axios.get('api/cource/studentList',{ params: {
        currpage: this.currpage
    }})
        .then(response => {
            this.students = response.data.data.userList;
            this.totalCount = response.data.data.totalCount;
           }).catch(error => {
            this.$router.push({'path':'/login'})
           });
        },
    }
}
</script>

<style>

</style>